<template>
  <div style="display: flex" class="menmuStyle tempxyz">
    <CCard class="leftCard">
      <div class="menuBtn" style>
        <!-- <CButton
          v-c-tooltip="'添加部门节点'"
          title="添加部门节点"
          variant="outline"
          color="rgb(2,40,88)"
          @click="addTreeNode"
          data-permission="Btn_Dept_AddR"
        >
          <img
            class="featuresstyle addTongji"
            src="@/assets/icons/增加同级.svg"
            alt
          />
        </CButton>
        <CButton
          v-c-tooltip="'编辑部门节点'"
          title="编辑部门节点"
          variant="outline"
          @click="updateTreeNode"
          data-permission="Btn_Dept_UpR"
        >
          <img class="featuresstyle" src="@/assets/icons/edit.svg" alt />
        </CButton>
        <CButton
          v-c-tooltip="'删除部门节点'"
          title="删除部门节点"
          variant="outline"
          color="rgb(2,40,88)"
          @click="delTreeNode"
          data-permission="Btn_Dept_DelR"
        >
          <img
            class="featuresstyle deleteBtn"
            src="@/assets/icons/delete.svg"
            alt
          />
        </CButton> -->
        <CButton
          title="添加部门节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="addTreeNode"
          data-permission="Btn_Dept_AddR"
        >
          添加部门
        </CButton>
        <CButton
          title="编辑部门节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="updateTreeNode"
          data-permission="Btn_Dept_UpR"
        >
          编辑部门
        </CButton>
        <CButton
          title="删除部门节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="delTreeNode"
          data-permission="Btn_Dept_DelR"
        >
          删除部门
        </CButton>
      </div>
      <div class="taskType-treeDiv">
        <ul id="organizationTree" class="ztree customStyleZtree"></ul>
      </div>
    </CCard>

    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">{{ catalogName }}列表</span>
        </div>
        <div class="header-right-wraper">
          <div class="search-wrapper">
            <CInput
              maxlength="30"
              placeholder="按用户名称搜索..."
              v-model="userName"
              class="input-search-style"
              @keyup.enter="enterfactionSearchUser"
            />
            <!-- 搜索 -->
            <!-- <img
                class="iconstylesearch"
                src="@/assets/icons/search.png"
                v-if="showimgsearchicon"
                @click="searchUser"
                alt
              /> -->
            <!-- 清除 -->
            <!-- <img
                class="iconstyleoff"
                src="@/assets/icons/clear.png"
                v-if="showimgofficon"
                @click="clearmess"
                alt
              /> -->
            <CButton
              @click="searchUser"
              color="info"
              class="header-search system-btn-style"
            >
              <!-- <CIcon
                  name="cil-magnifying-glass"
                  style="height: 14px; width: 14px"
                />&nbsp;&nbsp; -->
              搜索
            </CButton>
          </div>
          <CButton
            color="info"
            @click="addCatalog"
            class="header-main-btn system-btn-style"
            data-permission="Btn_Dept_Add"
          >
            <CIcon name="cil-plus" id="childDepartment" />
            &nbsp;{{ addDepartmentOrUser }}
          </CButton>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 45px)">
          <TableList
            ref="table"
            :getColumn="getColumns"
            :getAxios="getAxios"
            :dataList.sync="dataList"
          >
            <template v-slot:isLock="item">
              <img :src="getBadge(item.data.row.isLock)" />
            </template>
            <template v-slot:show_details="item">

              <Poptip  trigger="hover" word-wrap width="235">
                <CButton
                    title="分配"
                    variant="outline"
                    class="textBtnStyle system-btn-style"
                    @click="role(item.data.row.id)"
                    data-permission="Btn_User_Allot"
                >
                  分配
                </CButton>
                <CButton
                    title="禁用"
                    v-if="item.data.row.isLock == 0"
                    variant="outline"
                    class="textBtnStyle system-btn-style"
                    @click="lockUser(item.data.row.id)"
                    data-permission="Btn_User_Ban"
                >
                  禁用
                </CButton>
                <CButton
                    title="删除"
                    variant="outline"
                    class="textBtnStyle system-btn-style"
                    @click="del(item.data.row)"
                    data-permission="Btn_Dept_Del"
                >
                  删除
                </CButton>
                <CButton
                    id="jiejin"
                    title="解除"
                    v-if="item.data.row.isLock == 1"
                    variant="outline"
                    class="textBtnStyle system-btn-style"
                    @click="unLock(item.data.row.id)"
                    data-permission="Btn_User_Remove"
                >
                  解除
                </CButton>
                <div class="api" slot="content">

                  <CButton
                      title="详情"
                      variant="outline"
                      class="textBtnStyle system-btn-style"
                      @click="getInfo(item.data.row)"
                  >
                    详情
                  </CButton>


                  <CButton
                      title="编辑"
                      variant="outline"
                      class="textBtnStyle system-btn-style"
                      @click="update(item.data.row)"
                      data-permission="Btn_Dept_Up"
                  >
                    编辑
                  </CButton>

                  <CButton
                      title="重置密码"
                      variant="outline"
                      class="textBtnStyle system-btn-style"
                      @click="reset(item.data.row)"
                      data-permission="Btn_Dept_Del"
                  >
                    重置密码
                  </CButton>
                </div>
              </Poptip>
            </template>
          </TableList>
        </div>
      </CCardBody>

      <!--
      <CCardBody>
        <div class="menu">
          <CDataTable :items="data" :fields="fields" hover border>
            <template #isLock="{ item }">
              <td align="center">
                <img :src="getBadge(item.isLock)" />
              </td>
            </template>
            <template #show_details="{ item }">
              <td class="py-2" align="center">
                &lt;!&ndash; <CButton
                  v-c-tooltip="'详情'"
                  title="详情"
                  variant="outline"
                  @click="getInfo(item)"
                >
                  <CIcon
                    class="featuresstyle colortempstyle"
                    name="cil-line-spacing"
                  />
                </CButton>
                <CButton
                  v-c-tooltip="'分配'"
                  title="分配"
                  variant="outline"
                  @click="role(item.id)"
                  data-permission="Btn_User_Allot"
                >
                  <CIcon class="colortempstyle" name="cil-fork" />
                </CButton>
                <CButton
                  v-c-tooltip="'禁用'"
                  title="禁用"
                  v-if="item.isLock == 0"
                  variant="outline"
                  @click="lockUser(item.id)"
                  data-permission="Btn_User_Ban"
                >
                  <CIcon class="colortempstyle" name="cil-ban" />
                </CButton>
                <CButton
                  id="jiejin"
                  v-c-tooltip="'解除'"
                  title="解除"
                  v-if="item.isLock == 1"
                  variant="outline"
                  @click="unLock(item.id)"
                  data-permission="Btn_User_Remove"
                >
                  <CIcon class="colortempstyle" name="cil-link-broken" />
                </CButton>
                <CButton
                  v-c-tooltip="'编辑'"
                  title="编辑"
                  variant="outline"
                  @click="update(item)"
                  data-permission="Btn_Dept_Up"
                >
                  <img
                    class="featuresstyle"
                    src="@/assets/icons/edit.svg"
                    alt
                  />
                </CButton>
                <CButton
                  v-c-tooltip="'删除'"
                  title="删除"
                  color="rgb(2,40,88)"
                  variant="outline"
                  style="margin-right: 5px"
                  @click="del(item.id)"
                  data-permission="Btn_Dept_Del"
                >
                  <img
                    class="featuresstyle"
                    src="@/assets/icons/delete.svg"
                    alt
                  />
                </CButton> &ndash;&gt;
                <CButton
                  title="详情"
                  variant="outline"
                  class="textBtnStyle"
                  @click="getInfo(item)"
                >
                详情
                </CButton>
                <CButton
                  title="分配"
                  variant="outline"
                  class="textBtnStyle"
                  @click="role(item.id)"
                  data-permission="Btn_User_Allot"
                >
                分配
                </CButton>
                <CButton
                  title="禁用"
                  v-if="item.isLock == 0"
                  variant="outline"
                  class="textBtnStyle"
                  @click="lockUser(item.id)"
                  data-permission="Btn_User_Ban"
                >
                禁用
                </CButton>
                <CButton
                  id="jiejin"
                  title="解除"
                  v-if="item.isLock == 1"
                  variant="outline"
                  class="textBtnStyle"
                  @click="unLock(item.id)"
                  data-permission="Btn_User_Remove"
                >
                解除
                </CButton>
                <CButton
                  title="编辑"
                  variant="outline"
                  class="textBtnStyle"
                  @click="update(item)"
                  data-permission="Btn_Dept_Up"
                >
                编辑
                </CButton>
                <CButton
                  title="删除"
                  variant="outline"
                  class="textBtnStyle"
                  @click="del(item.id)"
                  data-permission="Btn_Dept_Del"
                >
                删除
                </CButton>
              </td>
            </template>
          </CDataTable>
        </div>
      </CCardBody>
      <CCardFooter>
        <CRow>
          <CCol class="footerPage">
            <span class="pageContent">
              每页
              <CSelect
                @change="getVendorId($event)"
                :options="[25, 5, 10, 15, 20]"
                v-model="pageSize"
                class="selectStyle"
                style
              />
              条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                this.allNum
              }}条记录)
            </span>
            <CPagination
              :activePage.sync="currentPage"
              :pages="total"
              align="end"
              v-if="total != 0"
            />
          </CCol>
        </CRow>
      </CCardFooter>-->
    </CCard>
    <!-- </CCol> -->
    <!-- 删除部门 -->
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除部门"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除部门</span>
      </p>
      <div class="modalBody">
        <p>删除部门时与部门相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!-- 删除用户 -->
    <Modal
      v-model="delUserShow"
      draggable
      scrollable
      title="删除用户"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除用户</span>
      </p>
      <div class="modalBody">
        <p>删除用户时与部门相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delUserCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delUserOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!--新建部门  -->
    <Modal
      v-model="addShow"
      title="新建部门"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">新建部门</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="部门名称"
              placeholder="请输入部门名称"
              horizontal
              v-model="orgData.name"
            />
            <CInput
              label="部门负责人"
              placeholder="请输入部门负责人"
              horizontal
              v-model="orgData.manager"
            />
            <CInput
              label="部门编码"
              placeholder="请输入部门编码"
              horizontal
              v-model="orgData.code"
            />
            <CInput
              label="部门描述"
              placeholder="请输入部门描述"
              horizontal
              v-model="orgData.organizationDesc"
            />
            <CInput
              label="部门排序"
              placeholder="请输入部门排序"
              horizontal
              v-model="orgData.sortNo"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!-- 新建用户 -->
    <Modal
      v-model="addUser"
      title="添加用户信息"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">添加用户信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="用户名"
              placeholder="请输入用户名"
              horizontal
              v-model="userData.username"
              minLenth="5"
              maxlength="50"
            />
            <CInput
              label="用户昵称"
              placeholder="请输入用户昵称"
              horizontal
              v-model="userData.nickname"
            />
            <CInput
              label="密码"
              placeholder="请输入密码"
              horizontal
              v-model="userData.pwd"
              type="password"
            />
            <CInput
              label="手机号"
              placeholder="请输入手机号(可不填)"
              horizontal
              v-model="userData.mobile"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addUserOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateOrgShow"
      title="更新部门"
      draggable
      scrollable
      :closable="false"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">更新部门</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="部门名称"
              placeholder="请输入部门名称"
              horizontal
              v-model="orgData.name"
            />
            <CInput
              label="部门负责人"
              placeholder="请输入部门负责人"
              horizontal
              v-model="orgData.manager"
            />
            <CInput
              label="部门编码"
              placeholder="请输入部门编码"
              horizontal
              v-model="orgData.code"
            />
            <CInput
              label="部门描述"
              placeholder="请输入部门描述"
              horizontal
              v-model="orgData.organizationDesc"
            />
            <CInput
              label="部门排序"
              placeholder="请输入部门排序"
              horizontal
              v-model="orgData.sortNo"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateOrgCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOrgOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateZuzhiShow"
      title="更新组织"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">更新组织</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="组织名称"
              placeholder="请输入部门名称"
              horizontal
              v-model="zuzhiData.name"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateZuzhiShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateZuzhiOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateShow"
      title="更新用户信息"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">更新用户{{userNickname}}的信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="用户名"
              placeholder="请输入用户名"
              horizontal
              v-model="userData.username"
              minLenth="5"
              maxlength="50"
              readonly
            />
            <CInput
              label="用户昵称"
              placeholder="请输入用户昵称"
              horizontal
              v-model="userData.nickname"
            />
            <!-- <CInput
              label="密码"
              placeholder="请输入密码"
              horizontal
              v-model="userData.pwd"
              type="password"
            /> -->
            <CInput
              label="手机号"
              placeholder="请输入手机号(可不填)"
              horizontal
              v-model="userData.mobile"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateUser" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="getShow"
      title="用户信息"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">用户信息</p>

      <CRow>
        <CCol md="12">
          <CForm>
            <!-- <CSelect
              label="组织机构"
              horizontal
              :options="enterList"
              :value.sync="orgData.enterpriseId"
              class="selectSuffix"
              readonly
            ></CSelect>
            <CInput label="部门名称" placeholder="请输入部门名称" horizontal v-model="orgData.name" readonly />
            <CInput
              label="部门负责人"
              placeholder="请输入部门负责人"
              horizontal
              v-model="orgData.manager"
              readonly
            />
            <CInput label="部门编码" placeholder="请输入部门编码" horizontal v-model="orgData.code" readonly />
            <CInput
              label="部门描述"
              placeholder="请输入部门描述"
              horizontal
              v-model="orgData.organizationDesc"
              readonly
            />
            <CInput
              label="部门排序"
              placeholder="请输入部门排序"
              horizontal
              v-model="orgData.sortNo"
              readonly
            />-->
            <CInput label="用户id" horizontal :value="item.id" readonly />
            <CInput
              label="用户名称"
              horizontal
              :value="item.username"
              readonly
            />
            <CInput
              label="昵称"
              horizontal
              :value="item.nickname"
              readonly
            ></CInput>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="getCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="getOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal v-model="bindShow" title="角色分配" draggable scrollable>
      <p slot="header" class="modalHeader">角色分配</p>
      <Table
        border
        stripe
        ref="selection"
        :columns="getColumn1"
        :data="roleDataList"
      ></Table>
      <template #footer class="footerBtns">
        <CButton @click="saveRoleCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="saveRole" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="lockShow"
      title="用户禁用"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">用户禁用</p>
      <div class="modalBody">
        <p>您正在禁用该用户</p>
        <p>请确认是否禁用?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="lockCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="lockOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="unLockShow"
      title="用户解禁"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">用户解禁</p>
      <div class="modalBody">
        <p>您正在解禁该用户</p>
        <p>请确认是否解禁?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="unLockCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="unLockOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="resetShow"
      title="密码重置"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">重置用户{{userNickname}}的密码</p>
      <div class="modalBody">
        <p>您正在重置用户{{userNickname}}的密码</p>
        <CInput
            label="请输入密码"
            placeholder="请输入重置密码"
            horizontal
            v-model="resetPwd"
            type="password"
        />
      </div>
      <template #footer class="footerBtns">
        <CButton @click="resetCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="resetOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:80px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "用户昵称",
    key: "nickname",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "用户名",
    key: "username",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "失败次数",
    key: "loginFailureCount",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "用户状态",
    key: "isLock",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    key: "show_details",
    label: "操作",
    _style: "width:320px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import endIcon from "@/assets/icons/endIcon.png";
import failedIcon from "@/assets/icons/failedIcon.png";
import TableList from "@/template/table/TableList";
export default {
  name: "organization",
  components: { TableList },
  data() {
    return {
      resetShow: false,
      resetPwd: "",//修改后的密码
      userNickname: "",//记录用户昵称

      userName: "",
      dataList: [],
      modalStyle: { top: "250px" },
      addDepartmentOrUser: "用户",
      updateOrgShow: false,
      bindShow: false,
      lockShow: false,
      unLockShow: false,
      delShow: false,
      getShow: false,
      updateShow: false,
      addShow: false,
      addUser: false,
      delUserShow: false,
      userData: {
        applicationId: 0,
        avatarPath: "",
        file: {},
        mobile: "",
        nickname: "",
        organizationId: 0,
        note: "",
        pwd: "",
        sex: 0,
        userCode: "",
        username: "",
      },

      organizationId: "",

      loading: true,
      data: [],
      roleDataList: [],
      item: {},
      clickId: -1,
      total: 1,
      currentPage: 1,
      treeData: [],
      catalogId: 0,
      fields,
      name: "",
      catalogName: "",
      orgData: {
        code: "",
        enterpriseId: "",
        manager: "",
        name: "",
        organizationDesc: "",
        parentId: 0,
        sortNo: 0,
        isLock: 0,
      },
      zuzhiData:{//公司信息
        id:"",
        name:"",
        code:"",
        fax:"",
        zipcode:"",
        address:"",
        memo:"",
      },
      updateZuzhiShow: false,
      enterData: [],
      allNum: 0,
      pageSize: 15,
      pages: 0,
      orgList: [],
      enterList: [],
      flag: false,
      currentEnterpriseId: 0,

      getColumns: [
        {
          title: "用户昵称",
          key: "nickname",
          className: "centerText",
          width: 140,
        },
        {
          title: "用户名",
          key: "username",
          className: "centerText",
          width: 140,
        },
        {
          title: "部门",
          key: "department",
          className: "centerText",
        },
        {
          title: "角色",
          key: "role",
          className: "centerText",
        },
        {
          title: "失败次数",
          key: "loginFailureCount",
          className: "centerText",
          width: 80,
        },
        {
          title: "用户状态",
          key: "isLock",
          slot: "isLock",
          className: "centerText",
          width: 80,
        },
        {
          key: "show_details",
          title: "操作",
          slot: "show_details",
          className: "centerText",
          width: 210,
        },
      ],
      getAxios: {
        url: this.$api.manageApi.queryAllUser, //请求路径
        method: "get", //请求方式
        dataList: {
          //  organizationId: this.userData.organizationId ? this.userData.organizationId : "",
        }, //请求参数
      },
    };
  },
  computed: {
    getColumn1() {
      return [
        { type: "selection", width: 60, align: "center" },
        { key: "id", title: "角色id", align: "center" },
        { key: "name", title: "角色名称", align: "center" },
      ];
    },
  },
  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getUserList();
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getUserList();
    },
    dataList(newVal) {
      if (newVal.length > 0) {
        this.flag = true; //部门有用户
        this.getNewTableList(newVal);
      } else {
        this.flag = false;
      }
    },
  },
  mounted() {
    this.getCatalogTreeList();
    // this.getUserList();
    // this.getAll();
  },
  methods: {
    getNewTableList(data) {
      data.forEach((element) => {
        let roleList = element.roleList;
        let departmentList = element.departmentList;
        let tempRole = "";
        let tempDepart = "";
        if (!roleList) roleList = [];
        roleList.forEach((ele) => {
          if (tempRole) {
            tempRole += "," + ele.name;
          } else {
            tempRole = ele.name;
          }
        });

        if (!departmentList) departmentList = [];
        departmentList.forEach((ele) => {
          if (tempDepart) {
            tempDepart += "," + ele.name;
          } else {
            tempDepart = ele.name;
          }
        });

        element.role = tempRole;
        element.department = tempDepart;
      });
    },

    enterfactionSearchUser() {
      this.searchUser();
    },
    searchUser() {
      let treeObj = $.fn.zTree.getZTreeObj("organizationTree");
      let sNode = treeObj.getSelectedNodes();
      if (sNode.length < 1) return;

      if (sNode[0].type === "enterprise") {
        this.getEnterUserList();
      } else if (sNode[0].type === "organization") {
        this.getUserList();
      }
    },
    getEnterUserList() {
      let path = this.$api.manageApi.queryAllUser;
      let param = {
        enterId: this.currentEnterpriseId,
        userName: this.userName.trim(),
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
    },

    getUserList() {
      let path = this.$api.manageApi.queryAllUser;
      let param = {
        organizationId: this.userData.organizationId,
        userName: this.userName.trim(),
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
      /* this.http.get(path, param).then((res) => {
        if (res.data.data.userList.length != 0) {
          self.flag = 1;
        } else {
          self.flag = 0;
        }
        if (res.data.success) {
          self.data = res.data.data.userList;
          self.allNum = res.data.data.total;
          self.total = Math.ceil(res.data.data.total / self.pageSize);
          // 修改表格
          self.fields = [
            {
              label: "序号",
              key: "number",
              _style:
                "width:80px;text-align: center;background:rgba(241,244,249,1);",
              align: "center",
            },
            {
              label: "用户昵称",
              key: "nickname",
              _style:
                "width:auto;text-align: center;background:rgba(241,244,249,1);",
              align: "center",
            },
            {
              label: "用户名",
              key: "username",
              _style:
                "width:auto;text-align: center;background:rgba(241,244,249,1);",
              align: "center",
            },
            {
              label: "失败次数",
              key: "loginFailureCount",
              _style:
                "width:90px;text-align: center;background:rgba(241,244,249,1);",
              align: "center",
            },
            {
              label: "用户状态",
              key: "isLock",
              _style:
                "width:90px;text-align: center;background:rgba(241,244,249,1);",
              align: "center",
            },
            {
              key: "show_details",
              label: "操作",
              _style:
                "width:320px;text-align: center;background:rgba(241,244,249,1);",
              align: "center",
            },
          ];
          for (let i = 0; i < self.data.length; i++) {
            self.data[i].number =
              (self.currentPage - 1) * self.pageSize + i + 1;
            if (self.data[i].login_count == undefined) {
              self.data[i].login_count = "";
            }
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });*/
    },
    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
    },
    getBadge(isLock) {
      switch (isLock) {
        case 0:
          return endIcon;
        case 1:
          return failedIcon;
      }
    },
    unLock(id) {
      this.unLockShow = true;
      this.clickId = id;
    },
    unLockCancel() {
      this.unLockShow = false;
    },
    unLockOk() {
      let self = this;
      let path = self.$api.manageApi.ban + "/" + self.clickId;
      let param = {
        type: 0,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.unLockShow = false;
          self.$Message.success(res.data.message);
          self.getUserList();
        } else {
          self.$Message.error(res.data.message);
        }
      });
    },
    lockOk() {
      let tableData = this.data;
      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i].id === this.clickId) {
          tableData[i].isLock = 0;
        }
      }
      let treeObj = $.fn.zTree.getZTreeObj("organizationTree");
      let type = treeObj.getSelectedNodes()[0].type;
      console.log(type,'gggg');

      let self = this;
      let path = this.$api.manageApi.ban + "/" + this.clickId;
      let param = {
        type: 1,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          this.lockShow = false;
          this.$Message.success(res.data.message);
          if(type == "enterprise"){
            self.getEnterUserList();
          }else{
            self.getUserList();
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    lockCancel() {
      this.lockShow = false;
    },
    lockUser(id) {
      this.lockShow = true;
      this.clickId = id;
    },
    getInfo(val) {
      this.getShow = true;
      this.clickId = val.id;
      this.item = JSON.parse(JSON.stringify(val));
    },
    role(id) {
      let self = this;
      this.bindShow = true;
      this.clickId = id;

      let path = this.$api.manageApi.getUsersRole;
      let param = {
        userId: this.clickId,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.roleDataList = res.data.data.roleList;
          for (let i = 0; i < self.roleDataList.length; i++) {
            let id = self.roleDataList[i].id;
            if (res.data.data.selectList.indexOf(id) != -1) {
              self.roleDataList[i]._checked = true;
            }
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    saveRoleCancel() {
      this.bindShow = false;
    },
    saveRole() {
      this.bindShow = false;
      let path = this.$api.manageApi.createUserRole;
      let roleIdList = [];
      for (let i = 0; i < this.$refs.selection.getSelection().length; i++) {
        roleIdList.push(this.$refs.selection.getSelection()[i].id);
      }
      let param = {
        userId: this.clickId,
        roleIdList: roleIdList,
      };
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.roleShow = false;
          this.getUserList();
          this.$Message.success(res.data.message);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    getCancel() {
      this.getShow = false;
    },
    delUserCancel() {
      this.delUserShow = false;
    },
    getOk() {
      this.getShow = false;
    },
    update(val) {
      this.updateShow = true;
      this.clickId = val.id;
      this.userNickname = JSON.parse(JSON.stringify(val.nickname));
      this.userData = JSON.parse(JSON.stringify(val)); //deep copy
      console.log(this.userData);
    },
    del(row) {
      this.delUserShow = true;
      this.clickId = row;
    },
    delTreeNode() {
      let treeObj = $.fn.zTree.getZTreeObj("organizationTree");
      let type = treeObj.getSelectedNodes()[0].type;
      if (type === "enterprise") {
        this.$Message.warning("组织机构节点不能删除");
      } else if (type === "organization") {
        this.clickId = treeObj.getSelectedNodes()[0].id;
        if (this.flag) {
          this.$Message.warning("该部门有用户不能删除");
          return;
        }
        this.delShow = true;
      }
    },
    addCatalog() {
      let treeObj = $.fn.zTree.getZTreeObj("organizationTree");
      if (treeObj.getSelectedNodes().length > 0) {
        let type = treeObj.getSelectedNodes()[0].type;
        if (type != "organization") {
          this.$Message.warning("添加用户请先选择部门节点");
        } else if (type === "organization") {
          this.addUser = true;
          this.userData.username = "";
          this.userData.pwd = "";
          this.userData.nickname = "";
          this.userData.mobile = "";
        }
      } else {
        this.$Message.warning("添加用户请先选择部门节点");
      }
    },
    delOk() {
      let self = this;
      let path = this.$api.manageApi.deleteTree;
      this.http.post(path,{id:self.clickId}).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getCatalogTreeList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.delShow = false;
    },
    delUserOk() {
      let self = this;
      self.delUserShow = false;
      let path = this.$api.manageApi.deleteUser + "/" + self.clickId.id+"?deptId="+self.clickId.roleList[0].id;
      this.http.get(path).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.searchUser();
        } else {
          this.$Message.error("删除失败！");
        }
      });
    },
    delCancel() {
      this.delShow = false;
    },

    //重置用户密码
    reset(val){
      this.resetShow = true;
      this.clickId = val.id;
      this.userNickname = JSON.parse(JSON.stringify(val.nickname));
    },
    resetOk(){
      if(this.resetPwd == "" || this.resetPwd == null){
        this.$Message.warning("用户密码不能为空！")
        return;
      }
      let path = this.$api.manageApi.resetUser + this.clickId;
      this.http.put(path,this.resetPwd).then((res)=>{
        if(res.data.code == 0){
          this.$Message.success(res.data.message);
          this.getUserList();
        }else{
          this.$Message.err(res.data.message);
        }
      })
      this.resetPwd = "";
      this.resetShow = false;
    },
    resetCancel(){
      this.resetShow = false;
    },

    addTreeNode() {
      let treeObj = $.fn.zTree.getZTreeObj("organizationTree");
      let type = treeObj.getSelectedNodes()[0].type;
      if (type === "enterprise") {
        this.catalogId = 0;
        this.addShow = true;
      } else if (type === "organization") {
        this.catalogId = treeObj.getSelectedNodes()[0].id;
        this.addShow = true;
      }
    },
    updateTreeNode() {
      let self = this;
      let treeObj = $.fn.zTree.getZTreeObj("organizationTree");

      let type = treeObj.getSelectedNodes()[0].type;
      if (type === "enterprise") {//组织
        this.clickId = treeObj.getSelectedNodes()[0].id;
        let path = this.$api.manageApi.getZuzhiData + this.clickId;
        this.http.get(path).then((res) => {
          if (res.data.success) {
            this.updateZuzhiShow = true;
            this.zuzhiData = res.data.data;
          }
        });
      } else if (type === "organization") {
        this.catalogId = treeObj.getSelectedNodes()[0].pId;
        this.clickId = treeObj.getSelectedNodes()[0].id;

        let path = this.$api.manageApi.getDetail + "/" + self.clickId;
        this.http.get(path).then((res) => {
          if (res.data.success) {
            this.updateOrgShow = true;
            self.orgData = res.data.data;
          }
        });
      }
    },
    //修改组织名
    updateZuzhiOk(){
      let path = this.$api.manageApi.updateZuzhi + this.clickId;
      let param = {
        address: this.zuzhiData.address,
        code: this.zuzhiData.code,
        fax:this.zuzhiData.fax,
        memo:this.zuzhiData.memo,
        name:this.zuzhiData.name,
        zipcode:this.zuzhiData.zipcode,
      }
      this.http.post(path, param).then((res) => {
        this.updateZuzhiShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          this.getCatalogTreeList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.zuzhiData = {
        id:"",
        name:"",
        code:"",
        fax:"",
        zipcode:"",
        address:"",
        memo:"",
      };
    },
    // 添加子部门弹窗->确认
    addOk() {
      let self = this;
      let path = this.$api.manageApi.add;

      self.orgData.parentId = self.catalogId;
      self.orgData.enterpriseId = self.currentEnterpriseId;

      this.http.post(path, self.orgData).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getCatalogTreeList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.addShow = false;
      this.orgData = {
        code: "",
        enterpriseId: 0,
        manager: "",
        name: "",
        organizationDesc: "",
        parentId: 0,
        sortNo: 0,
        isLock: 0,
      };
    },
    // 添加用户
    addUserOk() {
      let self = this;
      let path = this.$api.manageApi.createUser;
      if (self.userData.username == "") {
        self.$Message.info("用户名不能为空");
        return;
      }
      if (self.userData.pwd == "") {
        self.$Message.info("密码不能为空");
        return;
      }

      //old正则限制：至少8个字符，至少1个字母，1个数字和1个特殊字符
      // let oldvalue =
      //   "^(?=.*[A-Za-z])(?=.*\\d)(?=.*[$@$!%*#?&])[A-Za-z\\d$@$!%*#?&]{8,}$";
      let newValue = "^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d$@$!%*#?&]{6,}$"; //至少6位以上的数字和字母 特殊字符串可选
      let regExp = new RegExp(newValue);

      let result = regExp.test(this.userData.pwd);
      if (result == false) {
        this.$Message.warning(
          "密码需要包含至少6个字符，必须同时包含字母、数字",
          3000
        );
        return;
      }
      // let param = self.userData;
      let param = {
        applicationId: this.userData.applicationId,
        avatarPath: this.userData.avatarPath,
        mobile: this.userData.mobile,
        nickname: this.userData.nickname,
        note: this.userData.note,
        organizationId: this.organizationId,
        pwd: this.userData.pwd,
        sex: 0,
        userCode: "",
        username: this.userData.username
      }
      console.log(param);
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getUserList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      self.addUser = false;
    },
    addCancel() {
      this.addShow = false;
      this.addUser = false;
    },
    //编辑部门
    updateOrgOk() {
      let self = this;
      let path = this.$api.manageApi.organizationUpdate + "/" + self.clickId;
      let param = self.orgData;
      this.http.post(path, param).then((res) => {
        this.updateOrgShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getCatalogTreeList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.orgData = {
        code: "",
        enterpriseId: 0,
        manager: "",
        name: "",
        organizationDesc: "",
        parentId: 0,
        sortNo: 0,
        status: 0,
      };
    },
    updateOrgCancel() {
      this.updateOrgShow = false;
     this.orgData = {
        code: "",
        enterpriseId: 0,
        manager: "",
        name: "",
        organizationDesc: "",
        parentId: 0,
        sortNo: 0,
        status: 0,
      };
    },
    // 编辑用户
    updateUser() {
      let self = this;
      let path = this.$api.manageApi.updateUser + this.clickId;
      if (self.userData.username == "") {
        self.$Message.info("用户名不能为空");
        return;
      }
      let param = {
        applicationId: this.userData.applicationId,
        avatarPath: this.userData.avatarPath,
        mobile: this.userData.mobile,
        nickname: this.userData.nickname,
        note: this.userData.note,
        organizationId: 0,
        sex: 0,
        userCode: "",
        username: this.userData.username
      }
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getUserList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.updateShow = false;
      self.addUser = false;
    },
    updateCancel() {
      this.updateShow = false;
    },
    //获取企业列表
    getCatalogTreeList() {
      let self = this;
      self.treeData = [];
      let path = this.$api.manageApi.getEnterTree;
      let param = {
        isTree: true,
      };
      this.http.get(path, param).then((res) => {
        self.loading = false;
        if (res.data.success) {
          self.treeData = res.data.data;
          let setting = {
            view: {
              showLine: false,
              showIcon: false,
            },
            callback: {
              onClick: this.zTreeOnClick,
            },
          };

          let treeObj = $.fn.zTree.init(
            $("#organizationTree"),
            setting,
            self.treeData
          );
          if (self.currentEnterpriseId == 0) {
            self.currentEnterpriseId = self.treeData[0].id;
          }
          let rootNode = treeObj.getNodeByParam(
            "id",
            self.currentEnterpriseId,
            null
          );
          treeObj.selectNode(rootNode);
          // console.log(rootNode,'//////');
          // treeObj.expandNode(treeObj.getNodeByParam("id",1,null));//展开指定节点
          // treeObj.expandNode(rootNode,true,false,false);//展开指定节点
          // var nodes = treeObj.getSelectedNode();
          // if (nodes.length>0) {
          //   treeObj.expandNode(nodes[0], true, true, true);
          // }
          this.getOrganiseByEnterId(rootNode, "organizationTree");
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    zTreeOnClick(event, treeId, treeNode) {
      let self = this;
      self.catalogName = treeNode.name;
      if (treeNode.type === "enterprise") {
        self.currentEnterpriseId = treeNode.id;
        this.getOrganiseByEnterId(treeNode, treeId);
        self.getEnterUserList();
      } else if (treeNode.type === "organization") {
        self.addDepartmentOrUser = "用户";
        // 获取节点id保存至用户数据
        self.userData.organizationId = treeNode.id;
        this.organizationId = self.userData.organizationId;
        self.getUserList();
      }
    },
    //获取企业部门节点信息
    getOrganiseByEnterId(treeNode, treeId) {
      let self = this;
      let path = this.$api.manageApi.getTree;
      let param = {
        enterId: treeNode.id,
        isTree: true,
      };
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      this.http.get(path, param).then((res) => {
        self.loading = false;
        if (res.data.success) {
          if (res.data.data.length < 1) return;
          self.removeNodes(treeId); //删除选中的子节点 避免重复
          treeObj.addNodes(treeNode, res.data.data, false);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    /**
     * 删除选中的子节点
     */
    removeNodes(treeId) {
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      //选中节点
      var nodes = treeObj.getSelectedNodes();
      for (var i = 0, l = nodes.length; i < l; i++) {
        //删除选中的子节点
        treeObj.removeChildNodes(nodes[i]);
      }
    },

    // getCatalogList(parentId) {
    //   let self = this;
    //   self.data = [];
    //   let path = this.$api.manageApi.organizationGetByParentId + "/" + parentId;
    //   let param = {
    //     pageNum: self.currentPage,
    //     pageSize: self.pageSize,
    //   };

    //   this.http.get(path).then((res) => {
    //     if (res.data.code == 0) {
    //       self.fields = [
    //         {
    //           label: "序号",
    //           key: "number",
    //           _style:
    //             "width:80px;text-align: center;background:rgba(241,244,249,1);",
    //           align: "center",
    //         },
    //         {
    //           label: "部门名称",
    //           key: "name",
    //           _style:
    //             "width:auto;text-align: center;background:rgba(241,244,249,1);",
    //           align: "center",
    //         },
    //         {
    //           label: "部门描述",
    //           key: "organizationDesc",
    //           _style:
    //             "width:auto;text-align: center;background:rgba(241,244,249,1);",
    //           align: "center",
    //         },
    //         {
    //           label: "部门状态",
    //           key: "isLock",
    //           _style:
    //             "width:90px;text-align: center;background:rgba(241,244,249,1);",
    //           align: "center",
    //         },
    //         {
    //           key: "show_details",
    //           label: "操作",
    //           _style:
    //             "width:320px;text-align: center;background:rgba(241,244,249,1);",
    //           align: "center",
    //         },
    //       ];
    //       self.allNum = res.data.data.total;
    //       self.data = res.data.data.dataList;
    //       self.total = Math.ceil(res.data.data.total / self.pageSize);
    //       for (let i = 0; i < self.data.length; i++) {
    //         self.data[i].number =
    //           (self.currentPage - 1) * self.pageSize + i + 1;
    //       }
    //     } else {
    //       this.$Message.error(res.data.message);
    //     }
    //   });
    // },
    // getAll() {
    //   let self = this;
    //   let path = this.$api.manageApi.enterprise;
    //   this.http.get(path).then((res) => {
    //     if (res.data.success) {
    //       self.enterData = res.data.data.dataList;
    //       for (let i = 0; i < self.enterData.length; i++) {
    //         let param = {
    //           label: self.enterData[i].name,
    //           value: self.enterData[i].id,
    //         };
    //         self.enterList.push(param);
    //       }
    //     } else {
    //       this.$Message.error(res.data.message);
    //     }
    //   });
    // },
  },
};
</script>

<style scoped>
.col-md-2 {
  padding-left: 20px;
  padding-right: 10px;
}
.col-md-10 {
  padding-left: 0px;
  padding-right: 20px;
}
.menuBtn {
  margin-top: 10px;
  border-bottom: 1px solid #c4c9d0;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-evenly;
}
.ivu-tree {
  /* border: 1px solid #c4c9d0; */
  border-radius: 3px;
  /* max-height: 780px; */
  height: 100%;
  overflow: auto;
  /* overflow-y: scroll; */
  /* margin-left: 10px; */
  width: 94%;
  margin-left: 7px;
}
::-webkit-scrollbar {
  /* width: 3px;
  height: 3px; */
  background-color: #d8d8d8;
}
::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}

.leftTree .btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
  /* margin-right: 10px; */
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.addTongji {
  margin-left: 10px;
}
.deleteBtn {
  margin-right: 10px;
}
.btn:hover {
  color: #d8d8d8;
}
/* 样式 */
.cardHeader {
  padding: 10px 20px;
}
.userTitle {
  margin-bottom: 0 !important;
  margin-top: 5px;
}
.treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
}
.menu {
  height: calc(100% - 63px);
  overflow-y: auto;
}
</style>
<style scoped>
.taskType-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}
.menmuStyle {
  height: 100%;
}
.imageControl-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}
.ztree {
  margin: 0;
  padding: 0;
}
.rightCard {
  width: 80%;
  margin-left: 10px;
  flex: 1;
}
.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}

/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}
.onButton:hover {
  color: white;
}
/deep/ footer.page-link:hover {
  background-color: #ffffff;
}
</style>
